<template>
	<view class="container">
		<tui-navigation-bar backgroundColor="#fff" :isFixed="false" :isOpacity="false" :isImmersive="false">
			<view class="tui-content-box">
				<view class="tui-search-box" >
					<tui-icon name="edit" :size="18" color="#bfbfbf"></tui-icon>
					<input type="text" class="tui-search-text" v-model="search" placeholder="请输入搜索的商品编码" @blur="getSearch" @confirm="getSearch"></input>
				</view>
				<view class="tui-notice-box">
					<tui-icon name="search-2" color="#333" :size="28" @click="getSearch()"></tui-icon>
				</view>
			</view>
		</tui-navigation-bar>
		
		<view v-if="productList.length > 0" class="product-list">
			<!--商品列表-->
			<view class="pro-item" v-for="(item,index) in productList" :key="index">
				
				<view class="tui-flex-box">
					<view class="tui-flex">
						<view class="tui-center tui-flex-1" style="height: 100%; ">
							<view v-if="item.number_net50" style="width: 100%;">
								<image :src="tui.interfaceUrl()+item.jst_paths_net50" class="pro-img" mode="widthFix"></image>
								<view style="text-align: center;">{{ item.number_net50 }}</view>
							</view>
							<view v-else class="tui-center " style="height: 300px; width: 100%;">
								<tui-no-data :fixed="false" imgUrl="/static/images/toast/img_noorder_3x.png">后台对比中...</tui-no-data>
							</view>
						</view>
						<view class="tui-center tui-flex-1" style="height: 100%; ">
							<view v-if="item.number_net101" style="width: 100%;">
								<image :src="tui.interfaceUrl()+item.jst_paths_net101" class="pro-img" mode="widthFix"></image>
								<view style="text-align: center;">{{ item.number_net101 }}</view>
							</view>
							<view v-else class="tui-center "  style="height: 300px; width: 100%;">
								<tui-no-data :fixed="false" imgUrl="/static/images/toast/img_noorder_3x.png">后台对比中...</tui-no-data>
							</view>
						</view>
					</view>
					<view class="tui-flex">
						<view class="tui-center tui-flex-1">
							<image :src="tui.interfaceUrl()+item.image_name" class="pro-img" mode="widthFix"></image>
						</view>
						<view class="tui-center tui-light-blue tui-flex-1">
							<view class="pro-content">
								<view v-if="!item.accuracy">
									<tui-button style="z-index: 99;" v-for="(but_item, but_index) in button_text" :key="but_index" :type="but_item.color" shape="circle" width="180rpx" height="55rpx" margin="10px 0px 0px 0px" :size="18" plain bold @click="sublitAccuracy(but_item.text, item.id, index)">{{ but_item.text }}</tui-button>
								</view>
								<view v-else>
									<tui-button :type="item.accuracy === '准确'? 'primary':'warning'" shape="circle" width="180rpx" height="55rpx" margin="0px 0px 0px 0px" :size="18" plain bold>{{ item.accuracy }}</tui-button>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				
				
			</view>
			<!--商品列表-->
		</view>
		<tui-no-data v-else :fixed="false" imgUrl="/static/images/toast/img_nodata.png" style="margin-top: 50%;">暂无数据</tui-no-data>
		
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="primary"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn"></tui-nomore>
		<!--加载loadding-->
		
		<!-- <tui-footer :fixed="true" :size="18" copyright=" Copyright © 2025 精诚智 IPO All Rights Reserved." style="margin-bottom: 40px;"></tui-footer> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 0, //标题图标距离顶部距离
				opacity: 0,
				scrollTop: 0,
				// 列表
				pageIndex: 1,
				productList: [],
				loadData: [],
				loadding: false,
				pullUpOn: true,
				next: null,
				search: '',
				button_text: [{
					'color': 'primary',
					'text': '准确'
				},{
					'color': 'warning',
					'text': '不准确'
				}]
			}
		},
		created() {
			this.detail()
		},
		methods: {
			sublitAccuracy(rtext, rid, rindex) {
				let postData = {id: rid, text: rtext}
				this.tui.request("/api/ipo/accuracy/", "POST", postData, false, false, false).then((res) => {
					this.tui.toast(res.msg)
					this.productList[rindex].accuracy = rtext
				})
			},
			detail() {
				this.getDataList().then((res) => {
					console.log(123, res)
					this.next = res.next
					this.productList = this.productList.concat(res.results)
				})
			},
			getDataList() {
				let postData = {page: this.pageIndex, search: this.search}
				return new Promise((resolve, reject) => {
					this.tui.request("/api/load_ipo_images/", "GET", postData, false, false, false).then((res) => {
						resolve(res)
					})
				})
				
			},
			getSearch() {
				this.getDataList().then((res) => {
					this.loadding = true;
					this.pageIndex = 1
					this.loadding = false;
					this.next = res.next
					this.productList = res.results
				})
			}
		},
		onReachBottom: function() {
			if (this.next) {
				this.pageIndex = this.pageIndex + 1
				this.loadding = true;
				this.detail()
			} else {
				this.loadding = false;
				this.pullUpOn = false
			}
		}
	}
</script>

<style>
	@import '../../../static/style/thorui.css';
	
	.container {
		padding-bottom: 120rpx;
		box-sizing: border-box;
	}
	
	.tui-flex-box {
		/* padding: 0 30rpx 80rpx 30rpx; */
		box-sizing: border-box;
		font-size: 30rpx;
	}
	
	.tui-center {
		/* padding: 18rpx 0; */
		margin-bottom: 12rpx;
	}
	
	.header {
		padding: 80rpx 90rpx 60rpx 90rpx;
		box-sizing: border-box;
	}
	
	.title {
		font-size: 34rpx;
		color: #333;
		font-weight: 500;
	}
	
	.sub-title {
		font-size: 24rpx;
		color: #7a7a7a;
		padding-top: 18rpx;
	}
	.tui-title {
		width: 100%;
		padding: 50rpx 30rpx 30rpx;
		box-sizing: border-box;
		font-weight: bold;
	}
	.tui-header-bg {
		width: 100%;
		margin: 0;
	}
	.tui-header-img {
		width: 100%;
		height: 440rpx;
		display: block;
	}
	.tui-header-icon {
		width: 100%;
		position: fixed;
		top: 0;
		padding: 0 12rpx;
		display: flex;
		align-items: center;
		height: 32px;
		transform: translateZ(0);
		z-index: 99999;
		box-sizing: border-box;
	}
	
	.tui-content-box {
		width: 100%;
		height: 44px;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	.tui-avatar-box {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #eaeef1;
		flex-shrink: 0;
	}
	.tui-avatar {
		width: 28px;
		height: 28px;
		border-radius: 50%;
	}
	
	.tui-search-box {
		width: 100%;
		height: 32px;
		margin: 0 28rpx;
		border-radius: 18px;
		font-size: 14px;
		background-color: #f1f1f1;
		padding: 0 12px;
		box-sizing: border-box;
		color: #bfbfbf;
		display: flex;
		align-items: center;
	}
	
	.tui-bg-white {
		background-color: #ffffff !important;
	}
	.tui-search-text {
		padding-left: 10rpx;
	}
	
	.tui-notice-box {
		position: relative;
		flex-shrink: 0;
		font-size: 44rpx;
		color: #fff;
	}
	
	
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.product-list {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 30rpx 30rpx 0 30rpx;
		background: #fff;
	}

	.pro-item {
		background: #fff;
		box-sizing: border-box;
		width: 100%;
		position: relative;
		margin-bottom: 2%;
	}

	.pro-item::after {
		content: '';
		position: absolute;
		height: 200%;
		width: 200%;
		border: 1rpx solid #eaeef1;
		transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		left: 0;
		top: 0;
	}

	.pro-img {
		width: 100%;
		display: block;
	}

	.pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
		/* height: 165rpx; */
	}

	.pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.pro-price {
		padding-bottom: 20px;
	}

	.sale-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #ea1500;
	}

	.factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}
</style>
